<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <title>车辆车况定价查询报告</title>
</head>
<body>
<div>
  <div class="topInfo">
    <div>
<!--      <image if="reportCar.brand_logo" src="{{reportCar.brand_logo}}" class="brandLogo"></image>-->
<!--      <img src="../../../imgs/wutu.png" class="brandLogo"></img>-->
    </div>
    <div>
      <div>
        <text class="seriesName">{{carInfo.series_name}}</text>
      </div>
      <div class="carVin">
        <div>VIN：{{reportCar.vin || baseCarInfo.vin}}</div>
        <div>报告生成日期：{{reportCar.report_time}}</div>
<!--        <van-button plain color="#f5581a" size="small" style="margin-top: 5px;" bind:click="downFile">导出报告</van-button>-->
      </div>
    </div>
  </div>
  <div class="perMenus">
    <div class="useMenus" wx:if="{{baseCarInfo.eval_result}}">
      <div class="menusTitle" bindtap="toMyOrder">
        车辆估价
      </div>
      <div class="baseCarInfo">
        <div class="baseCont">
          <div>车商收购价</div>
          <div>10.58</div>
<!--          <div>{{baseCarInfo.eval_result[0].price_info.dealer_buy_price}}</div>-->
        </div>
        <div class="baseCont">
          <div>车商批发价</div>
          <div>10.58</div>
<!--          <div>{{baseCarInfo.eval_result[0].price_info.dealer_auction_price}}</div>-->
        </div>
        <div class="baseCont">
          <div>车商零售价</div>
          <div>10.58</div>
<!--          <div>{{baseCarInfo.eval_result[0].price_info.dealer_price}}</div>-->
        </div>
        <div class="baseCont">
          <div>帮卖价</div>
          <div>10.58</div>
<!--          <div>{{baseCarInfo.eval_result[0].price_info.help_sold_price}}</div>-->
        </div>
      </div>
    </div>
    <div class="useMenus">
      <div class="menusTitle" bindtap="toMyOrder">
        一般排查维修
      </div>
      <van-steps
              steps="{{ steps }}"
              direction="vertical"
              active-color="#000"
              inactive-color="#000"
      />
    </div>
    <div class="useMenus">
      <div class="menusTitle">
        车辆出险情况
      </div>
      <van-steps
              steps="{{ steps1 }}"
              direction="vertical"
              active-color="#000"
              inactive-color="#000"
      />
    </div>
    <div class="useMenus">
      <div class="menusTitle">
        车况数据统计
      </div>
      <div class="baseCarInfo">
        <div class="baseCont">
          <div>最后维修时间</div>
          <div>{{baseCarInfo.mtnce_record.last_time_to_shop}}</div>
        </div>
        <div class="baseCont">
          <div>车辆状况</div>
          <div>{{baseCarInfo.accident_type}}</div>
        </div>
        <div class="baseCont">
          <div>车辆行驶里程</div>
          <div>{{baseCarInfo.mtnce_record.total_mileage}}</div>
        </div>
        <div class="baseCont">
          <div>车辆出险次数</div>
          <div>{{baseCarInfo.mtnce_record.result.length}}</div>
        </div>
      </div>
    </div>
    <div class="useMenus">
      <div class="menusTitle">
        车况数据统计
      </div>
      <div class="baseCarInfo">
        <div class="baseCont">
          <div>最后维修时间</div>
          <div>{{baseCarInfo.mtnce_record.last_time_to_shop}}</div>
        </div>
        <div class="baseCont">
          <div>车辆状况</div>
          <div>{{baseCarInfo.accident_type}}</div>
        </div>
        <div class="baseCont">
          <div>车辆行驶里程</div>
          <div>{{baseCarInfo.mtnce_record.total_mileage}}</div>
        </div>
        <div class="baseCont">
          <div>车辆出险次数</div>
          <div>{{baseCarInfo.mtnce_record.result.length}}</div>
        </div>
      </div>
    </div>
    <div class="useMenus">
      <div class="menusTitle">
        车况数据统计
      </div>
      <div class="baseCarInfo">
        <div class="baseCont">
          <div>最后维修时间</div>
          <div>{{baseCarInfo.mtnce_record.last_time_to_shop}}</div>
        </div>
        <div class="baseCont">
          <div>车辆状况</div>
          <div>{{baseCarInfo.accident_type}}</div>
        </div>
        <div class="baseCont">
          <div>车辆行驶里程</div>
          <div>{{baseCarInfo.mtnce_record.total_mileage}}</div>
        </div>
        <div class="baseCont">
          <div>车辆出险次数</div>
          <div>{{baseCarInfo.mtnce_record.result.length}}</div>
        </div>
      </div>
    </div>
    <div class="useMenus">
      <div class="menusTitle">
        车况数据统计
      </div>
      <div class="baseCarInfo">
        <div class="baseCont">
          <div>最后维修时间</div>
          <div>{{baseCarInfo.mtnce_record.last_time_to_shop}}</div>
        </div>
        <div class="baseCont">
          <div>车辆状况</div>
          <div>{{baseCarInfo.accident_type}}</div>
        </div>
        <div class="baseCont">
          <div>车辆行驶里程</div>
          <div>{{baseCarInfo.mtnce_record.total_mileage}}</div>
        </div>
        <div class="baseCont">
          <div>车辆出险次数</div>
          <div>{{baseCarInfo.mtnce_record.result.length}}</div>
        </div>
      </div>
    </div><div class="useMenus">
    <div class="menusTitle">
      车况数据统计
    </div>
    <div class="baseCarInfo">
      <div class="baseCont">
        <div>最后维修时间</div>
        <div>{{baseCarInfo.mtnce_record.last_time_to_shop}}</div>
      </div>
      <div class="baseCont">
        <div>车辆状况</div>
        <div>{{baseCarInfo.accident_type}}</div>
      </div>
      <div class="baseCont">
        <div>车辆行驶里程</div>
        <div>{{baseCarInfo.mtnce_record.total_mileage}}</div>
      </div>
      <div class="baseCont">
        <div>车辆出险次数</div>
        <div>{{baseCarInfo.mtnce_record.result.length}}</div>
      </div>
    </div>
  </div>


  </div>
</div>

</body>
<script>

</script>
<style>
  .brandLogo{
    width: 50px;
    height: 50px;
    margin-left: 5px;
    margin-top: 50%;
    border-radius: 5px;
  }
  .topInfo{
    width: 95%;
    height: 130px;
    background-color: rgb(27, 23, 23);
    margin: 0 auto;
    border-radius: 10px 10px 0 0;
    display: flex;
  }
  .seriesName{
    color: white;
    margin-left: 20px;
    margin-top: 80px;
    font-size: 20px;
    font-weight: bold;
  }
  .carVin{
    color: #ffffff;
    margin-left: 20px;
  }
  .perMenus{
    box-sizing: border-box;
    overflow: hidden;
  }
  .useMenus{
    background: #fff;
    margin-bottom: 10px;
    box-sizing: border-box;
    padding: 12px 15px;
  }
  .menusTitle{
    padding-left: 10px;
    border-left: 5px solid #f5581a;
    /* background: #f7803c; */
  }
  .baseCarInfo{
    width: 90%;
    height: 200px;
    background-color: rgb(214, 221, 231);
    margin: 0 auto;
    border-radius: 10px;
    margin-top: 10px;
  }
  .baseCont{
    margin: 15px;
    padding-top: 10px;
    display: flex;
    justify-content: space-between;
  }
</style>
</html>
